<template>
    <el-card class="box-card">
        <div  id="clearfix">
            <span>翔瑞金融后台管理系统</span>
        </div>
        <div  class="form">
            <el-form :model="user" label-width="60px">
            <el-form-item >
                <el-input v-model="user.username"  prefix-icon="el-icon-user-solid"></el-input>
            </el-form-item>
            <el-form-item >
                <el-input v-model="user.password"   prefix-icon="el-icon-lock" type="password"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button
                    type="primary"
                    @click="onSubmit"
                    style="margin-right: 20px"
                    >登录</el-button
                >
                <el-button>取消</el-button>
            </el-form-item>
             <router-link to="/register" style="margin-left:60px;color:#ffffff">没有账号，去注册</router-link>
        </el-form>
        </div>
        
    </el-card>
</template>

<script>
export default {
    data() {
        return {
            user: {
                username: "18113410471",
                password: "123456",
            },
        };
    },
    methods: {
       async onSubmit() {
            const res = await this.api.login.login(this.user);
            console.log(res)
            if (res.code==200) {
                this.$message({
                    message: "恭喜你登录成功",
                    type: "success",
                });
                localStorage.token = res.data.token;
                this.$router.push("/home");
            } else {
                this.$message.error("登录失败,密码或用户名错误");
            }
        },
    },
};
</script>
<style scoped>
.el-card {
    box-sizing: border-box;
    width: 100%;
    height: 100vh;
     background-color: #2d3a4b;
}
#clearfix{
    text-align: center;
    font-size: 25px;
    font-weight: bolder;
    color: #ffffff;
    margin-top: 100px; 
    border: none;
}
#clearfix .el-card__header{
    border-bottom: none;
}
.form{
    border: none;
    text-align: center;
    width: 500px;
    margin: 50px auto;
}


</style>